<template>
  <div class="list">
    <my-header class="header">
      <span class="left"></span>
      <span class="title">图书商城</span>
      <span class="right" @click="$router.push('/myBook')">我的书架</span>
    </my-header>
    <div class="search-box">
      <input v-model="content" type="text" placeholder="输入书名搜索">
    </div>
    <div class="box">
      <my-card class="item" v-for="item in list" :key="item.id" :book="item"></my-card>
    </div>
  </div>
</template>
<script>
import myHeader from '@/components/myHeader/myHeader'
import myCard from '@/components/myCard/myCard'
import { useStore } from 'vuex'
import { ref, watchEffect } from 'vue'
export default {
  components: {
    myHeader,
    myCard
  },
  // created() {
  //   this.$store.dispatch('getList')
  // }

  setup() {
    let store = useStore()
    const content = ref('')
    const list = ref([])
    list.value = store.state.list
    store.dispatch('getList')
    watchEffect(() => {
      if(content.value) {
        list.value = list.value.filter(item => {
          return item.name.includes(content.value)
        })
      }
      // console.log(content.value);
      if(content.value === '') {
        // console.log(1);
        list.value = store.state.list
      }
    })
    return {
      list,
      content
    }
  }
}
</script>
<style lang="scss" scope>
.list {
  overflow: auto;
}
.search-box {
  width: 100%;
  height: 40px;
  
  input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding-left: 10px;
    background-color: #ccc;
    font-size: 18px;
  }
}
.box {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  .item {
    flex-basis: 50%;
    flex-shrink: 0;
    flex-grow: 0;
    padding: 15px;
    box-shadow: 3px 3px 10px #ccc;
  }
}
  
</style>
